<template>
    <div id="app">
        <div id="topbar">
            {{ pageTitle}}
        </div>
        <router-view/>
        <div id="navbar">
            <el-menu :default-active="activeIndex" class="el-menu" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :router="true">
                <!-- 首页 -->
                <el-menu-item index="/">
                    <i class="el-icon-menu"></i>
                </el-menu-item>
                <!-- 发现 -->
                <el-menu-item index="/find">
                    <i class="el-icon-view"></i>
                </el-menu-item>
                <!-- 用户 -->
                <el-menu-item index="/user">
                    <i class="el-icon-star-on"></i>
                </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            activeIndex: '/',
            pageTitle: '首页'
        }
    },
    created () {
        const path = this.getPath()
        this.activeIndex = path
        this.pageTitle = this.getTitle(path)
    },
    updated () {
        const path = this.getPath()
        this.activeIndex = path
        this.pageTitle = this.getTitle(path)
    },
    methods: {
        getPath: function () {
            console.log(this.$route.path)
            return this.$route.path
        },
        getTitle: function (path) {
            const titleList = {
                '/': '首页',
                '/find': '发现',
                '/user': '用户'
            }
            console.log(titleList[path])
            return titleList[path]
        }
    }
}
</script>

<style lang="stylus">
body
    margin 0
    padding 3rem 0 4rem 0
    text-align center

#topbar
    position fixed
    top 0
    left 0
    right 0
    height 3rem
    line-height 3rem
    font-size 1.2rem
    color #fff
    text-align center
    background-color #545c64

#navbar
    position fixed
    left 0
    right 0
    bottom 0

    ul
        display flex
        
        li
            flex 1
            text-align center
</style>
